<template>
  <div>
    <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-position="right" label-width="120px">
      <el-row class="mg-top20">
        <el-col :span="11">
          <el-form-item label="表名" style="margin: 0;" prop="tableName">
            <el-select v-model="formData.tableName" filterable placeholder="请选择表名" @change="initComment">
              <el-option v-for="item in tableList" :key="item.tableName" :label="item.comment" :value="item.tableName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="描述" style="margin: 0;"><el-input v-model="formData.comment"   /></el-form-item>
        </el-col>
      </el-row>
      <el-row class="mg-top20">
        <el-col :span="11">
          <el-form-item label="类名" style="margin: 0;"><el-input v-model="formData.className" readonly="" /></el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="包路径" style="margin: 0;"><el-input v-model="formData.packagePath" /></el-form-item>
        </el-col>
      </el-row>
      <el-row class="mg-top20">
        <el-col :span="11">
          <el-form-item label="表类型" style="margin: 0;" prop="relationType">
            <el-select v-model="formData.relationType"   filterable >
              <el-option label="单表" value="1"></el-option>
              <el-option label="左树(主表)" value="2"></el-option>
              <el-option label="右表(附表)" value="3"></el-option>
              <el-option label="主表" value="4"></el-option>
              <el-option label="附表" value="5"></el-option>
              <el-option label="树表" value="6"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <span class="closeBtn" @click="cancel">取消</span>
      <el-button class="minWid btn btn-outline-primary ml-3" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import addEdit from './addEdit';

import { getAllTables } from '@/api/adminPage/sysAutoCode';

export default {
  name: 'autoCode',
  props: {
    from: {
      type: Object,
      require: true,
      default: () => {}
    },
   formData: {
     type: Object,
     require: true
   },
  },

  data() {
    return {
      tableList: [],
      rules: {
        tableName: [{ required: true, message: '表名不能为空', trigger: 'change' }],
        relationType: [{ required: true, message: '表类型不能为空', trigger: 'change' }]
      }
    };
  },
  computed: {},
  created() {
    this.initData();
  },
  methods: {
    cancel() {
      //初始化一些属性
      this.$emit('cancel');
    },
    initData() {
      this.queryAllTables();
    },
    queryAllTables() {
      getAllTables().then(res => {
        if (res.result) {
          this.tableList = res.result;
        }
      });
    },
    initComment(data) {
      let obj = this.tableList.find(item => {
        return item.tableName === data;
      });
      this.formData.comment = obj.comment;
      this.formData.className = this.toCamel(this.formData.tableName);
    },
    toCamel(str) {
      let ret;
      ret = str.replace(/([^_])(?:_+([^_]))/g, function($0, $1, $2) {
        return $1 + $2.toUpperCase();
      });
      ret = ret.substr(0, 1).toUpperCase() + ret.substr(1);
      return ret;
    },
    next() {
      //校验数据
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.$emit('next', this.formData);
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-input__inner {
  background-color: #eff2f7 !important;
  border: 1px solid #ced4da !important;
  color: #74788d !important;
  padding: 0 12px !important;
  &::-webkit-input-placeholder {
    color: #74788d !important;
  }
}
.forms {
  max-height: calc(100vh - 360px);
  margin-top: 1.875rem;
}
.mg-top20 {
  margin-top: 25px;
  margin-bottom: 35px;
}

::v-deep .el-form-item__label {
  font-size: 13px;
  color: #495057;
  font-weight: 500;
  line-height: 32px;
  padding: 0 12px 0 0;
  margin: 0;
  text-align: right;
  float: left;
}

::v-deep .dialog-footer {
  border-top: 1px solid #eff2f7 !important;
  padding: 16px !important;
  margin-top: 16px;
}
.minWid {
  min-width: 108px;
}
.forms {
  padding-right: 0;
  max-height: calc(100vh - 360px);
}
.beforeBtn {
  float: left;
  line-height: 32px;
  color: #556de5;
  cursor: pointer;
}
.closeBtn {
  line-height: 32px;
  color: #73778d;
  cursor: pointer;
}
.title-h3 {
  font-weight: bold;
  span {
    padding-right: 10px;
    color: red;
  }
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label,
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label {
  &:after {
    content: '';
    margin-left: 0px;
  }
  &:before {
    content: '*';
    color: #f46a6a;
    margin-right: 4px;
  }
}
</style>
